<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <script src="../00.插件/babel.min.js"></script>
  <script src="../00.插件/react.development.js"></script>
  <script src="../00.插件/react-dom.development.js"></script>
  <style>
      .outer{
          width: 300px;
          height: 300px;
          background-color: pink;
      }
      .active {
          display: block;
      }
  </style>
</head>
<body>
<div id="app"></div>

<script type="text/babel">
  let hot = true
  const title = "JSX"
  const name = "wdh"
  let isActive = true

  const vDom = (
    <div className="outer">
      <p>天气预报展示</p>
      <ul className={isActive?"active":""}>
        <li>{title}</li>
        <li>姓名：{name}</li>
        <li>今天的天气:{hot?"晴天":"雨天"}</li>
      </ul>
      <button id="btn1">切换列表状态</button>
      <button id="btn2">切换天气状态</button>
    </div>
  )

  const root =  ReactDOM.createRoot(document.getElementById('app')).render(vDom)

</script>
<!--<script>-->
<!--  const btn1 = document.querySelector('#btn1')-->
<!--  const btn2 = document.querySelector('#btn2')-->
<!--  console.log(btn1)-->
<!--  // const btn2 = document.querySelector('.btn2')-->
<!--  btn1.onclick = function () {-->
<!--    hot = !hot-->
<!--  }-->
<!--  btn2.onclick = function () {-->
<!--    isActive = !isActive-->
<!--  }-->
<!--</script>-->
</body>
</html>